<template>
  <div
    @tap="showInfo"
    class="list-item"
  >
    <div
      v-html="item.icon"
      class="user-icon"
    />
    <div class="content">
      <div class="title">
        <div class="title-content">
          <div
            v-if="item.isNew"
            class="new"
          />
          {{ item.title }} <span class="time">{{ item.time }}</span>
        </div>
      </div>
      <div class="remark">
        <span
          :style="`width:${item.delayBtn ? '160px' : '250px'}`"
          v-html="item.remark"
        />
        <div class="buttons">
          <button
            v-if="item.delayBtn"
            @tap="delay"
            type="button"
            class="delay mui-btn je-audio-btn"
          >
            {{ item.delayBtnText }}
          </button>
          <button
            :class="[item.priorityBtnIcon]"
            @tap="priority"
            type="button"
            class="priority mui-btn star-btn mui-icon fa je-audio-btn"
          >
            {{ item.priorityBtnText }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ListItem',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: String,
      default() {
        return '';
      },
    },
  },
  data() {
    return {
      wfFlowInfo: {
        to_submit: '送交给我',
        to_jump: '送交给我',
        to_allot: '调拨给我',
        to_returnsubmit: '送交给',
        to_rollback: '退回给我',
        to_withdraw: '取回',
        to_entrust: '委托给我',
        to_returnback: '退回给我',
        to_callentrust: '撤销委托',
        to_transmit: '转办给我',
        to_taketask: '领取任务',
        to_end: '流程结束',
        to_round: '传阅给我',
        to_takeround: '审阅',
        to_circular: '办理',
        to_reject: '驳回',
        no: '未处理',
        yes: '已处理',
        to_pass: '通过',
        to_nopass: '不通过',
        to_waiverpass: '弃权',
        to_userdiy: '转交',
        to_backuserdiy: '转交',
      },
    };
  },
  computed: {
    item() {
      const row = this.data;
      const { type } = this;
      const item = {
        id: row.taskId,
        proccessName: row.proccessName,
        funcName: row.funcName,
        user: row.bean.SY_STARTEDUSERNAME,
        userId: row.bean.SY_STARTEDUSER,
        shortname: '',
        remark: '',
        step: '', // 记录当前流程信息
        time: JE.dateFormat4Time(row.createTime),
        taskName: row.taskName,
        priority: row.priority,
        delay: row.delay,
        type,
        isNew: row.isNew,
        priorityBtnText: row.priority == '1' ? '加星' : '加星',
        priorityBtnIcon: row.priority == '1' ? 'fa-star' : 'fa-star-o',
        submitUser: row.bean.SY_CREATEUSERNAME, // 提交人
        submitUserId: row.bean.SY_CREATEUSERID, // 提交人ID
      };
      row.workflow_type = type;

      // 流程信息
      let flowObj = JE.decode(row.bean.SY_LASTFLOWINFO || '{}');
      flowObj = JE.isNotEmpty(flowObj) ? flowObj : '{}';
      // 经办，我的  是当前人
      if (['PI_PREAPPROV', 'PI_DELAY'].indexOf(item.type) == -1) {
        for (const wf in this.wfFlowInfo) {
          if (this.wfFlowInfo[wf].indexOf('我') != -1) {
            this.wfFlowInfo[wf] = this.wfFlowInfo[wf].split('我')[0];
          }
        }
      } else {
        // 审批，延迟  是发起人
        item.delayBtn = true;
        item.delayBtnText = item.type == 'PI_PREAPPROV' ? '加入延迟' : '取消延迟';
        item._taskName = '申请人';
      }
      item.user = JE.isNotEmpty(flowObj.userName) ? flowObj.userName : row.bean.SY_LASTFLOWUSER;// 当前人
      item.userId = JE.isNotEmpty(flowObj.userId) ? flowObj.userId : row.bean.SY_LASTFLOWUSERID;
      // 头像
      item.icon = JE.getUserPhoto(item.submitUserId, true);

      const { displayConfigInfo } = row;

      // 标题
      item.title = JE.isNotEmpty(item.submitUser) ? item.submitUser : '';
      let tranName = '';
      if (JE.isNotEmpty(flowObj)) {
        if (['PI_PREAPPROV', 'PI_DELAY'].indexOf(item.type) == -1 && flowObj.tranCode) {
          tranName = this.wfFlowInfo[flowObj.tranCode] + row.bean.SY_PREAPPROVUSERNAMES || '未知动作';
        } else if (flowObj.tranCode) {
          tranName = this.wfFlowInfo[flowObj.tranCode] || '未知动作';
        } else {
          tranName = '送交给我';
        }
        if (JE.isNotEmpty(tranName)) {
          if (JE.isNotEmpty(displayConfigInfo)) {
            item.step = `${item.user}『已审批』`;
          } else {
            item.step = `${item.user}『${tranName}』`;
          }
        }
      } else if (JE.isNotEmpty(row.bean.SY_LASTFLOWUSER)) {
        item.title = row.bean.SY_LASTFLOWUSER;
      }
      item.title += `，${item.proccessName}`;
      // 意见
      if (JE.isNotEmpty(displayConfigInfo)) {
        item.remark = `${item.step}，${JE.toXT(displayConfigInfo, row)}`;
      } else {
        item.remark = `${item.step}，需处理任务：${item.taskName}`;
        if (JE.isNotEmpty(flowObj.comment)) {
          item.remark = `${item.step}，意见：${flowObj.comment}`;
        }
      }

      item.taskName = item._taskName || item.taskName;
      return item;
    },
  },
  created() {
  },
  methods: {
    /**
       * 详情
       */
    showInfo() {
      const self = this;
      if (self.data.funcCode) {
        self.data.code = self.data.funcCode;
      }
      if (self.data.pkValue == null || self.data.tableCode == null) {
        JE.msg('系统数据错误');
        return;
      }
      JE.showFunc(self.data.code, {
        page: 'workflow',
        values: self.data.bean,
        query: {
          id: self.data.pkValue,
          tableCode: self.data.tableCode,
        },
      });
      // src\plugins\func\viewModel\workflow\workflowPanel\index.vue
      // this.$set(this.data, 'isNew', false);
      // JE.fire('je-workflow-info', 'init', {
      //   data: this.data,
      //   opener: plus.webview.currentWebview().id,
      //   show: true
      // });
    },
    /**
         * 加星
         */
    priority() {
      window.event.stopPropagation();
      JE.playAudio4Btn();
      this.$set(this.data, 'priority', this.data.priority == '1' ? '0' : '1');
      JE.ajax({
        url: JE.getUrlMaps('je.core.wf.taskInfo.updateTaskPriority'),
        params: {
          taskId: this.data.taskId,
          priority: this.data.priority,
        },
      });
      this.$emit('resetList');
    },
    /**
       * 延迟
       */
    delay() {
      window.event.stopPropagation();
      const me = this;
      JE.playAudio4Btn();
      const delay = this.data.delay == '1' ? '0' : '1';
      me.$set(this.data, 'delay', delay);
      JE.ajax({
        url: JE.getUrlMaps('je.core.wf.taskInfo.updateTaskDelay'),
        params: {
          taskId: this.data.taskId,
          delay: this.data.delay,
        },
        callback() {
          if (delay == '1') {
            JE.refreshBadge({
              badge: -1, apkBadge: -1, code: 'JE-PLUGIN-WF', type: 'WF',
            });
            JE.msg('已加入我的延迟中...');
          } else {
            JE.refreshBadge({
              badge: 1, apkBadge: 1, code: 'JE-PLUGIN-WF', type: 'WF',
            });
            JE.msg('已取消延迟...');
          }
          me.$emit('refreshDelay', me.data);
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
  @import "~@/theme/index.less";

  .list-item {
    .proccessName {
      font-size: 12*@hd;
      padding-right: 50*@hd;
    }
    .taskName {
      font-size: 14*@hd;
      color: #8f8f94;
      float: right;
    }
    .user {
      color: #536DFE;
      font-size: 14*@hd;
      padding-left: 5*@hd;
    }
    .time-msg .new {
      margin-left: 5*@hd;
      border-radius: 50%;
      font-size: 0*@hd;
      padding: 3*@hd;
      background-color: #dd524d;
      display: inline-block;
      margin-right: 5*@hd;
      margin-bottom: 3*@hd;
    }
    .remark {
      color: #A9ABA9;
      padding: 10*@hd 0;
      font-size: 13*@hd;
      padding-right: 50*@hd;
      position: relative;
      span{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14*@hd;
        display: inline-block;
      }
    }
    .time {
      font-size: 12*@hd;
      color: #8f8f94;
    }
    .buttons {
      position: absolute;
      right: 0;
      // bottom: 5 * @hd;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12*@hd;
      // line-height: 24*@hd;
      display: flex;
      align-items: center;
      button {
        padding: 0 12px;
        font-size: 11*@hd;
        // margin:0 2*@hd;
        border: 0;
      }
      .star-btn {
        margin-right: 0;
        padding-right: 0;
        font-size: 14*@hd;
        font-family: "FontAwesome";
        &:before {
          color: #FFD37F;
        }
      }
      .delay {
        background-color: #FF8C8C;
        border-color: #FF8C8C;
        color: #FFFFFF;
        padding: 4px 12px;
      }
    }
    .title {
      color: #3F3F3F;
      font-size: 16*@hd;
      .title-content {
        padding:1px* @hd 0 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 60 * @hd;
      }
    }
    .content {
      padding-left: 50*@hd;
      .time {
        position: absolute;
        right: 16*@hd;
        top: 13*@hd;
        font-size: 12*@hd;
        color: #A9ABA9;
      }
    }
  }

</style>

<style lang="less">
  @import "~@/theme/index.less";

  .list-item {
    .user-icon {
      position: absolute;
      left: 10*@hd;
      width: 44*@hd;
      /*通用头像样式*/
      .je-user-photo {
        width: 44*@hd;
        height: 44*@hd;
        border-radius: 100%;
        display: inline-block;
      }
      .je-user-photo.photo-text {
        background-color: #efa544;
        color: #fff;
        text-align: center;
        line-height: 44*@hd;
        font-size: 12*@hd;
      }
    }
  }
</style>
